<template>
  <div id="mapGaode" style="width: 500px; height: 500px"></div>
</template>

<script>
import { onMounted } from "vue";

export default {
  setup() {
    const gaode = () => {
      if (window.AMap) {
        let map = new window.AMap.Map("mapGaode", {
          zoom: 11.2,
        });

        map.plugin('AMap.Geolocation', function() {
          var geolocation = new window.AMap.Geolocation({
            enableHighAccuracy: true,
            timeout: 10000,
            buttonOffset: new window.AMap.Pixel(10, 20),
            zoomToAccuracy: true,
            buttonPosition: 'RB',
          });

          map.addControl(geolocation);
          geolocation.getCurrentPosition((status, result) => {
            if (status === 'complete') {
              onComplete(result);
            } else {
              onError(result);
            }
          });
        });

        function onComplete(data) {
          var lng = data.position.getLng();
          var lat = data.position.getLat();
          console.log(`定位成功: 经度: ${lng}, 纬度: ${lat}`);

          var marker = new window.AMap.Marker({
            position: [lng, lat],
            map: map,
          });

          map.setCenter([lng, lat]);

          var geocoder = new window.AMap.Geocoder({
            radius: 1000,
          });
        }

        function onError(data) {
          console.error('定位失败', data);
        }
      } else {
        console.error('AMap is not loaded.');
      }
    };

    onMounted(() => {
      gaode();
    });

    return {};
  },
};
</script>

<style scoped></style>
